<template>
  <slot v-if="showSlot" :userPermisstions="permissions"></slot>
</template>

<script setup lang="ts">
/*
 * @author 渡一
 * @date 2024-12-02 11:46:08
 * @description 权限控制组件
 * @see 🚀
 * @status done
 */
// 模块引入
import { computed } from 'vue'
import useLoginStore from '@/store/login'

const { permissions } = useLoginStore()

defineOptions({
  // 组件名称
  name: 'AuthorityComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

interface IProps {
  /** 权限文本或数组，也可以不传 */
  permission?: string | Array<string>
  /** 如果传入的字符串数组，只要任何一个存在，就显示；也可以不传 */
  isSome?: boolean
}

const props = defineProps<IProps>()

// 计算属性，用于判断是否显示插槽
const showSlot = computed(() => {
  // 如果没有定义传入的属性权限，则返回true
  if (!props.permission) {
    return true
  }
  // 如果没有权限列表Permissions，则返回false
  if (!Permissions) {
    return false
  }
  // 如果权限是一个数组，则判断数组中的每一个权限是否都在Permissions中
  if (Array.isArray(props.permission)) {
    if (props.isSome) {
      // 如果isSome为true，则只要数组中的任何一个权限在Permissions中，就返回true
      // 适合大的组件中，只要有一个权限存在，则显示大的组件
      return props.permission.some((p) => permissions.includes(p))
    }
    // 如果数组中的任何一个权限不在Permissions中，则返回false
    // 譬如需要多个组件权限都存在，才能显示，按钮需要多个权限都存在才能显示
    return props.permission.every((p) => permissions.includes(p))
  } else {
    // 否则，判断权限是否在Permissions中
    return permissions.includes(props.permission)
  }
})
</script>

<style scoped lang="scss"></style>
